<template>
	<div>
		<div class="container" id="app">
			<!-- 查询条件区域 -->
			<div class="search">
				<el-input
					v-model="searchCondition.nameOrPhone"
					placeholder="客户姓名/联系电话，支持模糊查找"
				></el-input>
				<SelectState v-model="searchCondition.state"></SelectState>
				<SelectUser
					v-model="searchCondition.ownerUsername"
					v-if="this.$store.state.currentUser.role === 'MANAGER'"
				></SelectUser>
				<el-button type="primary" @click="handleSearch">
					<i class="el-icon-search"></i>
					查询
				</el-button>
			</div>
			<!-- 数据表格区域 -->
			<el-table
				:data="searchResult.list"
				style="width: 100%; margin-bottom: 20px"
			>
				<el-table-column prop="name" label="客户姓名">
					<template slot-scope="scope">
						<el-link type="primary" @click="showDrawer(scope.row)">
							{{ scope.row.name }}
						</el-link>
					</template>
				</el-table-column>
				<el-table-column prop="gender" label="性别"></el-table-column>
				<el-table-column prop="phone" label="联系电话"></el-table-column>
				<el-table-column
					prop="lastFollowUpDate"
					label="最后跟进日期"
				></el-table-column>
				<el-table-column
					prop="source"
					label="来源"
					width="160"
				></el-table-column>
				<el-table-column prop="state" label="状态"></el-table-column>
				<el-table-column prop="reportToDate" label="报备日期"></el-table-column>
				<el-table-column prop="dealDate" label="成交日期"></el-table-column>
				<el-table-column prop="ownerUsername" label="负责人"></el-table-column>
			</el-table>

			<!-- 分页栏 -->
			<el-pagination
				@size-change="handleSizeChange"
				@current-change="handleCurrentChange"
				:current-page.sync="searchCondition.page"
				:page-sizes="[10, 20, 50]"
				:page-size.sync="searchCondition.size"
				layout="total, sizes, prev, pager, next, jumper"
				:total="searchResult.total"
				background
				style="text-align: center"
			></el-pagination>

			<!-- 抽屉，用来显示客户的详细信息 -->
			<el-drawer
				title="详细信息"
				:visible.sync="drawer"
				size="80%"
				:with-header="false"
			>
				<el-main>
					<el-descriptions title="客户详细信息" :column="4" size="mini">
						<!-- 自定义一块内容，放入el-descriptions组件的叫做extra的插槽(slot)内 -->
						<template
							slot="extra"
							v-if="this.$store.state.currentUser.role === 'MANAGER'"
						>
							<el-button type="danger" size="small" @click="handleDelete">
								删除
							</el-button>
						</template>
						<el-descriptions-item label="客户姓名">
							{{ currentCust.name }}
						</el-descriptions-item>
						<el-descriptions-item label="性别">
							{{ currentCust.gender }}
						</el-descriptions-item>
						<el-descriptions-item label="联系电话">
							{{ currentCust.phone }}
						</el-descriptions-item>
						<el-descriptions-item label="信息来源">
							{{ currentCust.source }}
						</el-descriptions-item>
						<el-descriptions-item label="状态">
							{{ currentCust.state }}
						</el-descriptions-item>
						<el-descriptions-item label="报备日期">
							{{ currentCust.reportToDate }}
						</el-descriptions-item>
						<el-descriptions-item label="成交日期">
							{{ currentCust.dealDate }}
						</el-descriptions-item>
						<el-descriptions-item label="负责人">
							{{ currentCust.ownerUsername }}
						</el-descriptions-item>
						<el-descriptions-item label="地址">
							{{ currentCust.address }}
						</el-descriptions-item>
					</el-descriptions>
					<el-tabs value="followup">
						<el-tab-pane label="跟进" name="followup">
							<FollowUp
								:current-cust="currentCust"
								:key="currentCust.custId"
							></FollowUp>
						</el-tab-pane>
						<el-tab-pane label="编辑" name="edit">
							<Edit
								:current-cust="currentCust"
								:key="currentCust.custId"
							></Edit>
						</el-tab-pane>
						<el-tab-pane
							label="指派"
							name="assign"
							v-if="this.$store.state.currentUser.role === 'MANAGER'"
						>
							<Assign
								:current-cust="currentCust"
								:key="currentCust.custId"
							></Assign>
						</el-tab-pane>
					</el-tabs>
				</el-main>
			</el-drawer>
		</div>
	</div>
</template>

<script>
import Assign from "../../components/Assign.vue";
import Edit from "../../components/Edit.vue";
import FollowUp from "../../components/FollowUp.vue";
import SelectState from "../../components/SelectState.vue";
import SelectUser from "../../components/SelectUser.vue";
export default {
	components: { FollowUp, Edit, Assign, SelectUser, SelectState },
	data() {
		return {
			// 用户列表
			users: [],
			// 查询条件
			searchCondition: {
				nameOrPhone: "",
				state: "",
				ownerUsername: this.$store.state.currentUser.username,
				size: 10,
				page: 1,
			},
			// 查询结果
			searchResult: {
				list: [],
				total: 0,
			},
			// 抽屉是否可见
			drawer: false,
			// 当前点击的客户
			currentCust: {},
		};
	},
	methods: {
		handleSizeChange() {
			this.pageNum = 1;
			this.query();
		},
		handleCurrentChange() {
			this.query();
		},
		handleSearch() {
			this.pageNum = 1;
			this.query();
		},
		query() {
			// 请求后端，传递查询条件，得到查询结果，更新data里面的searchResult
			this.axios
				.get("/customer", {
					params: this.searchCondition,
				})
				.then((res) => (this.searchResult = res.data));
		},
		showDrawer(customer) {
			// 把被点击的那个客户对象存到data中
			this.currentCust = customer;
			this.drawer = true;
		},
		handleDelete() {
			this.$confirm("此操作将永久删除该客户, 是否继续?", "警告", {
				type: "warning",
			}).then(() => {
				this.axios
					.delete(`/customer/${this.currentCust.custId}`)
					.then(() => {
						this.$message.success("删除成功");
						// 关闭抽屉
						this.drawer = false;
						// 重新请求后端，刷新表格中的数据
						this.query();
					})
					.catch(() => {
						this.$message.error("该客户已存在跟进记录，不能删除！");
					});
			});
		},
	},
};
</script>

<style scoped>
.search {
	display: flex;
	justify-content: space-between;
	gap: 20px;
	margin-bottom: 20px;
}
</style>
